<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>checkEmail</title>
  <style>
    html,
    body,
    #app {
      padding: 0;
      margin: 0;
      height: 100vh;
      width: 100vw;
      /* background-color: red; */
      font-size: 14px;
    }

    .home {
      width: 100%;
      height: 100%;
    }

    .email-box {
      width: 800px;
      margin: 50px auto;
    }

    input:focus {
      outline: 0;
    }

    .input-value {
      float: left;
      border: 0;
    }

    /* label {
  float: right;
} */
    .label-wrap {
      /* background-color: red; */
      width: 7%;
      line-height: 14px;
      font-size: 14px;
      text-align: right;
    }

    label:hover {
      text-decoration: underline;
    }

    .email-group {
      margin: 10px 0;
      width: 100%;
      position: relative;
      display: flex;
    }

    .email-container {
      margin-left: 10px;
      border: 1px solid #ccc;
      box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
      line-height: 14px;
      width: 93%;
      font-size: 14px;
      overflow: hidden;
    }

    .email-title {
      margin-left: 65px;
      line-height: 14px;
    }

    .email-title:hover {
      text-decoration: underline;
    }

    .addr_input {
      float: left;
    }

    i {
      font-style: normal;
    }

    .addr_base {
      float: left;
      height: 18px;
      margin: 0 2px;
    }

    .addr_base:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .addr_error {
      color: red;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <div class="email-box">
        <email label='收件人'></email>
        <email label='抄送' v-show='add'></email>
        <span class="email-title" @click='addSong'>{{add ? '删除抄送':'添加抄送'}}</span>
      </div>
      <ul>
        <li> 1:当文本框失去焦点时触发;</li>
        <li> 2:已分号 ；结尾时触发;</li>
        <li> 3 :只有满足 /^\w+@(qq|163|yahu)\.com$/ 验证通过;</li>
        <li> 4:可以双击来修改 错误的邮箱地址</li>
        <li> 5:支持，清除键 ← </li>
      </ul>
    </div>
  </div>

  <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
  <script>

    let checkValue = {
      props: {
        item: {
          type: Object,
          defalut() {
            return {}
          }
        }
      },
      template: `<div>
    <input class="addr_input" v-if="ishowInput" type="text" ref="inputRef" @blur="handleBlur" @input="handleInput">
    <div @dblclick="handleDbClick" v-else class="addr_base" :class='{ addr_error: !item.flag }' :title="msg" unselectable="on">
      <i unselectable="on">
        {{item.value}}<span class="semicolon">;</span>
      </i>
      <a href="javascript:;" class="addr_del" name="del"></a>
    </div>
  </div>`,
      data() {
        return { ishowInput: false }
      },
      computed: {
        msg() {
          return this.item.flag ? '' : '该地址格式有错误 ，请双击修改'
        }
      },
      methods: {
        handleDbClick() {
          this.ishowInput = true
          this.$nextTick(() => {
            this.$refs.inputRef.focus()
            this.$refs.inputRef.value = this.item.value
          })
        },
        handleBlur() {
          let data = this.$refs.inputRef.value
          if (!data.length) {
            data = this.item.value
          }
          this.ishowInput = false
          this.$emit('email-change', { value: data, id: this.item.id })
        },
        handleInput() {
          let data = this.$refs.inputRef.value
          if (data.indexOf(';') > -1) {
            data = data.substring(0, data.length - 1)
            this.$refs.inputRef.value = data
            this.handleBlur()
          }
        }
      }
    };

    let email = {
      components: {
        checkValue: checkValue
      },
      props: {
        label: {
          type: String,
          default: ''
        }
      },
      template: `<div>
    <div class="email-group">
      <div class="label-wrap"> <label> {{label}}:</label></div>
      <div class="email-container">
        <checkValue v-for='(v,i)  in emailList' :key="i" :item='v' @email-change='emailChange' />
        <input v-model="inputValue" @focus='handleFocus' @blur="handleBlur" class="input-value" ref="mainInputRef" />
      </div>
    </div>
  </div>`,
      data() {
        return { inputValue: '', emailList: [] }
      },
      mounted() { },
      methods: {
        handleBlur() {
          let data = this.inputValue.trim()
          if (data) {
            this.inputValue = ''
            this.emailList.push({
              id: Date.now(),
              flag: this.checkEmail(data),
              value: data
            })
          }
        },
        handleFocus() {
          this.$refs.mainInputRef.addEventListener('keyup', this.keyup.bind(this), false)
        },
        keyup(e) {
          if (e.keyCode === 8 && !this.inputValue) {
            this.emailList.pop()
          }
        },
        checkEmail(data) {
          const regEmail = /^\w+@(qq|163|yahu)\.com$/
          return regEmail.test(data)
          const of = document.createDocumentFragment
        },
        emailChange(item) {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            const i = this.emailList.findIndex(v => v.id === item.id)
            this.emailList[i].value = item.value
            this.emailList[i].flag = this.checkEmail(item.value)
          })
        }
      },
      watch: {
        inputValue(val) {
          let data = val.trim()
          if (!data || data.length < 1) {
            console.log('请输入合法字符')
            data = ''
            return
          }
          if (data.indexOf(';') > 0) {
            data = data.substring(0, data.length - 1)
            this.inputValue = ''
            this.emailList.push({
              id: Date.now(),
              flag: this.checkEmail(data),
              value: data
            })
          }
        }
      }
    };

    const app = new Vue({
      el: "#app",
      components: {
        email: email
      },
      data() {
        return {
          add: false
        }
      },

      mounted() {
        console.log('/^w+@(qq|163|yahu).com$/')
      },
      methods: {
        addSong() {
          this.add = !this.add
        }
      }
    })
    console.log(app);
  </script>
</body>

</html>